<template>
  <div v-show="active === flag" class="step-main">
    <div class="step-content">
      <!-- 前端展示设置表格 -->
      <v-card>
        <v-card-title>前端展示设置</v-card-title>
        <v-card-text>
          <v-data-table :items="tableFormCurr" :headers="headers" item-key="id" :loading="loading" :items-per-page="-1"
            class="frontend-table">
            <template #item.drag="{ item }">
              <v-btn icon="mdi-drag" size="small" variant="text" class="move-btn" />
            </template>

            <template #item.fieldName="{ item }">
              <v-text-field v-model="item.fieldName" disabled variant="outlined" density="compact" hide-details />
            </template>

            <template #item.fieldComments="{ item }">
              <v-text-field v-model="item.fieldComments" disabled maxlength="100" counter variant="outlined"
                density="compact" hide-details />
            </template>

            <template #item.showType="{ item }">
              <v-select v-model="item.showType" :items="dictCurr.show_type || []" item-title="dictName"
                item-value="dictValue" :disabled="item.disabled" clearable variant="outlined" density="compact"
                hide-details @update:model-value="showTypeChange(item)" />
            </template>

            <template #item.izShowList="{ item }">
              <v-switch v-model="item.izShowList" :disabled="item.disabled || !item.showType" :true-value="1"
                :false-value="0" color="primary" hide-details @update:model-value="izShowListChange(item)" />
            </template>

            <template #item.izShowForm="{ item }">
              <v-switch v-model="item.izShowForm" :disabled="item.disabled || !item.showType" :true-value="1"
                :false-value="0" color="primary" hide-details />
            </template>

            <template #item.queryType="{ item }">
              <v-select v-model="item.queryType" :items="dictCurr.query_type || []" item-title="dictName"
                item-value="dictValue"
                :disabled="item.disabled || item.showType === '2' || item.showType === '3' || item.showType === '4' || !item.izShowList"
                clearable variant="outlined" density="compact" hide-details placeholder="请选择(可空)" />
            </template>
          </v-data-table>
        </v-card-text>
      </v-card>
    </div>

    <!-- 步骤底部 -->
    <StepFooter ref="stepFooterRef" :flag="flag" :min-flag="minFlag" :max-flag="maxFlag" :info-data="{
      obj: this,
      baseForm: baseFormCurr,
      tableForm: tableFormCurr
    }" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import StepFooter from './footer/StepFooter.vue';
import { deepClone } from '@/utils/clone';
import { isNull } from '@/utils/validate';

interface Props {
  active: number;
  minFlag: number;
  maxFlag: number;
  baseForm: any;
  tableForm: any[];
  dict: any;
  baseDictData: any;
}

const props = withDefaults(defineProps<Props>(), {
  active: 1,
  minFlag: 1,
  maxFlag: 1,
  baseForm: () => ({}),
  tableForm: () => [],
  dict: () => ({}),
  baseDictData: () => ({ fieldList: [], JavaFieldMap: {} })
});

const emit = defineEmits(['inform-flag', 'inform-data', 'change-step', 'close', 'submit']);

// 表格头部定义
const headers = [
  { title: '拖动', key: 'drag', width: 80, sortable: false },
  { title: '字段名称', key: 'fieldName', width: 200 },
  { title: '字段描述', key: 'fieldComments', width: 240 },
  { title: '展示方式', key: 'showType', width: 140 },
  { title: '列表显示', key: 'izShowList', width: 80 },
  { title: '表单显示', key: 'izShowForm', width: 80 },
  { title: '检索类别', key: 'queryType', width: 140 }
];

// 响应式数据
const flag = ref(2);
const title = ref('前端展示设置');
const loading = ref(false);
const stepFooterRef = ref();

const dictCurr = ref<any>({});
const baseFormCurr = ref<any>({});
const tableFormCurr = ref<any[]>([]);
const selectRows = ref<any[]>([]);

// 展示方式改变
function showTypeChange(item: any) {
  if (!isNull(item)) {
    if (isNull(item.showType)) {
      item.izShowForm = 0;
      item.izShowList = 0;
      item.queryType = '';
    } else {
      // 如果是字典则需要把 Java类型强制改为 String 且不可改
      if (item.showType === '2') {
        item.javaType = 'String';
      }
    }
    izShowListChange(item);
  }
}

// 列表显示改变
function izShowListChange(item: any) {
  if (!isNull(item)) {
    // 在列表显示
    if (item.izShowList === 1) {
      // 字典
      if (item.showType === '2') {
        item.queryType = 'EQ';
      }
      // 日期
      else if (item.showType === '3' || item.showType === '4') {
        item.queryType = 'RANGE';
      }
    } else {
      item.queryType = '';
    }
  }
}

// 行选中
function setSelectRows(val: any[]) {
  selectRows.value = val;
}

// 监听 props 变化
watch(() => props.baseForm, (newV) => {
  baseFormCurr.value = deepClone(newV);
}, { deep: true });

watch(() => props.tableForm, (newV) => {
  tableFormCurr.value = deepClone(newV);
}, { deep: true });

watch(() => props.dict, (newV) => {
  dictCurr.value = deepClone(newV);
}, { deep: true });

// 组件挂载时执行
onMounted(() => {
  // 告诉父节点自己的 flag 编号
  emit('inform-flag', flag.value, title.value);

  // 拷贝 props
  baseFormCurr.value = deepClone(props.baseForm);
  tableFormCurr.value = deepClone(props.tableForm);
  dictCurr.value = deepClone(props.dict);
});
</script>

<style lang="scss">
.step-main {
  .step-content {
    height: 540px;
    overflow-y: auto;
  }

  .frontend-table {
    .v-data-table__tbody tr {
      &:hover {
        background-color: rgba(0, 0, 0, 0.04);
      }
    }
  }

  .move-btn {
    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }
}
</style>
